<template>
    <div class="page">
        <!-- 加载提示 -->
        <div v-if="isLoading" class="loading-mask">
            <div class="loading-content">
                <img src="http://image.niwenjia.cn/IMG_8219.GIF" class="loading-icon" />
                <span>加载中...</span>
            </div>
        </div>

        <div class="top">
            <div class="top-box">
                <img class="box-img" :src="userInfo.userAvatar || 'src/assets/man.png'" />
                <div class="box-text">
                    <span class="box-text-name">{{ userInfo.email || '当前未登录' }}</span>
                    <div class="box-bot">
                        <span class="box-bot-text">账号: {{ userInfo.email || '未设置' }}</span>
                    </div>
                    <div class="user-intro">简介：{{ userInfo.userProfile || '我很神秘' }}</div>
                    <div class="user-role">角色：{{ formatRole(userInfo.userRole) }}</div>
                </div>
            </div>
        </div>
        <div class="content">
            <van-grid :columns="4" border="false">
                <van-grid-item v-for="(tab, index) in tabsList" :key="index" :icon="tab.icon" :text="tab.title">
                </van-grid-item>
            </van-grid>
            <van-cell v-for="(item, index) in caseList.flat()" :key="index" :title="item.title"
                :label="item.description" :icon="item.icon" is-link />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import 'vant/lib/index.css';

const hasToken = ref(false);

// 检查token
const checkToken = () => {
    const token = localStorage.getItem('token')
    hasToken.value = !!token;
};


onMounted(() => {
    checkToken();
    loadUserInfo();
});
// 模拟API请求
const fetchUserInfo = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            const userInfoStr = localStorage.getItem('userInfo');
            resolve(userInfoStr ? JSON.parse(userInfoStr) : null);
        }, 1000);
    });
};

const loadUserInfo = async () => {
    isLoading.value = true;
    try {
        const res = await fetchUserInfo();
        if (res) {
            userInfo.value = res;
        }
    } catch (error) {
        console.error('获取用户信息失败:', error);
        alert('获取用户信息失败');
    } finally {
        isLoading.value = false;
    }
};

const isLoading = ref(false);
const userInfo = ref({
    id: null,
    email: null,
    userAvatar: null,
    userProfile: null,
    userRole: null,
    createTime: null,
    userAccount: null,
    password: null
});

const tabsList = ref([
    {
        icon: 'like-o',
        title: '我的点赞',
        key: 'like'
    },
    {
        icon: 'star-o',
        title: '我的收藏',
        key: 'favorite'
    },
    {
        icon: 'calendar-o',
        title: '我的预约',
        key: 'order'
    },
    {
        icon: 'share-o',
        title: '我的发布',
        key: 'publish'
    }
]);

const caseList = ref([
    [
        {
            icon: 'service-o',
            title: '在线客服',
            description: '随时联系我们的客服人员'
        },
        {
            icon: 'question-o',
            title: '帮助反馈',
            description: '提交你的问题和建议'
        },
        {
            icon: 'setting-o',
            title: '设置中心',
            url: '/pages/member/setup/setup',
            description: '个性化你的设置'
        }
    ]
]);

// 格式化角色
const formatRole = (role) => {
    const roleMap = {
        admin: '管理员',
        user: '普通用户'
    };
    return roleMap[role] ||' 普通用户';
};

</script>

<style lang="scss" scoped>
.page {
    padding-bottom: 50px;
}

.top {
    padding: 20px;
    background: var(--van-primary-color);
    color: white;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.top-box {
    display: flex;
    align-items: center;
    column-gap: 30px;
}

.box-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid white;
}

.box-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}

.box-text-name {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
}

.box-bot {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.box-bot-text {
    font-size: 14px;
    margin-right: 15px;
    opacity: 0.9;
}

.user-intro,
.user-role {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 3px;
}

.content {
    margin-top: 20px;
}

.loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}
</style>